<template>
  <div class="comp-set-phone">
    <modal :show="true">
      <validator :rules="rules" :parent="_self">
        <form class="m-form-dialog" name="form" action="javascript:;">
          <div class="modal-header">
            <a href="javascript:;" class="close" @click="hide"><span>×</span></a>
            <span class="modal-title">{{$t('common.comp.setPhone.title')}}</span>
          </div>
          <div class="modal-body">
            <div class="col-row fn-gray">
              {{$tc('common.comp.setPhone.tip',2)}}
            </div>
            <div class="col-row">
              <div class="col-label">
                <label>{{$t('common.comp.setPhone.phone')}}</label>
                <select v-model="form.phoneRegion">
                  <option v-for="item in phoneList" :key="item.x" :value="item">{{item}}</option>
                </select>
              </div>
              <div class="col-input">
                <input type="text" tabindex="1" class="fn-block" :placeholder="$t('common.comp.setPhone.placeholder')" autocomplete="off" id="phone" name="phone" maxlength="20" v-model="form.phone">
                <div class="ui-tip"></div>
              </div>
            </div>
            <div class="col-row">
              <div class="col-label">
                <label for="verifyCode">{{ $t('common.pVerification') }}</label>
              </div>
              <div class="col-input">
                <div class="comp-verify-code">
                  <a href="javascript:;" class="ui-btn ui-btn--gray ui-btn--block" v-if="!REG_PHONE.test(form.phone)" @click="checkPhone()">{{$t('common.sendEmail')}}</a>
                </div>
                <verify-code :on-success="onSendSuccess" :on-fail="onSendFail" :sendType="'PHONE'" :sendAccount="form.phone" v-if="REG_PHONE.test(form.phone)"></verify-code>
                <input type="text" tabindex="2" class="input input--small" autocomplete="off" id="verifyCode" name="identifyingCode" maxlength="6" :placeholder="$t('common.pVerification')" v-model="form.identifyingCode">
                <div class="ui-tip"></div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <div class="col-row">
              <div class="col-label">
                <label>&nbsp;</label>
              </div>
              <div class="col-text">
                <div class="btn-group">
                  <button type="submit" class="ui-btn binds" v-if="isRequesting === false" @click="submit()">{{ $t('common.confirm') }}</button>
                  <button type="submit" class="ui-btn" disabled v-if="isRequesting === true">{{ $t('common.waiting') }}...
                  </button>
                  <a href="javascript:;" class="btn-cancel" @click="hide">{{ $t('common.cancel') }}</a>
                </div>
              </div>
            </div>
          </div>
        </form>
      </validator>
    </modal>
  </div>
</template>

<script type="text/babel">
import Vue from "vue";
import Modal from "../../grsc-base/component/Modal.vue";
import Validator from "../../grsc-base/component/Validator/main";
import commonService from "../common/commonService";
import { REG_PHONE } from "../../grsc-base/common/constants";
import VerifyCode from "../component/VerifyCode.vue";

export default Vue.extend({
  data() {
    return {
      form: {
        phoneRegion: "86",
        phone: "",
        identifyingCode: ""
      },
      phoneList: ["86", "825", "60"],
      rules: {
        phone: {
          required: true,
          pattern: REG_PHONE,
          patternTip: this.$t("common.comp.setPhone.pattenTip"),
          requiredTip: this.$t("common.comp.setPhone.requiredTip")
        },
        identifyingCode: {
          required: true,
          requiredTip: this.$t("common.verifyCodeRequireTip"),
          pattern: "\\d{6}",
          patternTip: window.CODE.IDENTIFY[this.$i18n.locale]
        }
      },
      isRequesting: false,
      REG_PHONE: REG_PHONE
    };
  },
  props: {
    onHide: {
      type: Function,
      default() {}
    },
    successCbfn: Function,
    default() {}
  },
  computed: {},
  components: {
    modal: Modal,
    Validator,
    VerifyCode
  },
  created() {},
  methods: {
    onSendSuccess() {
      this.rules.identifyingCode.$setRight(this.$t("common.codeSentTip"));
    },
    onSendFail(rep) {
      this.rules.identifyingCode.$setError(rep.msg);
    },

    checkPhone() {
      // if(!REG_PHONE.test(form.phone)){
      //     this.rules.phone.$setError(this.$t('common.comp.setPhone.pattenTip'));
      // }
    },
    submit() {
      if (this.rules.$checkAll() === false) {
        return;
      }
      let param = {
        phone: this.form.phoneRegion + this.form.phone
      };

      let header = {
        "service-code": this.form.identifyingCode
      };

      this.isRequesting = true;
      commonService
        .setPhone(param, header)
        .done(rep => {
          if (rep.code === window.CODE.SUCCESS) {
            this.successCbfn && this.successCbfn();
            this.$emit("success", this.form.phone);
            this.hide();
            window.success(this.$t("common.success"));
          } else if (rep.code === window.CODE.IDENTIFY.CODE) {
            this.rules.identifyingCode.$setError(
              window.CODE.IDENTIFY[this.$i18n.locale]
            );
          } else {
            window.error(rep.msg);
          }
        })
        .always(() => {
          this.isRequesting = false;
        });
    },
    hide() {
      this.$emit("hide");
    }
  }
});
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-set-phone{
        .input--small{
            width: 120px;
        }
    }
</style>